魔法的本質就是心想事成，如果連想都不敢想的話，就不會實現。

如果我和你們說其實不需要會寫程式，只需要會說你想要什麼電腦會幫你做出你想要的東西，你們相信嗎？這也是一種心想事成吧！

昨天寫了 Hello World，今天來看看要怎麼做註冊頁面。大家還記得我們我們的題目是什麼嗎？要使用GPT來完成這個任務。我這邊想推薦一個最近新出的編輯器 Cursor

目標

1. 成功做出登入頁面

Cursor

Cursor 是什麼？是一個深度整合AI的編輯器。他使用 VS code 的分支構建。那為什麼不使用 Vs code 就好了？有什麼不一樣？

1. 自動補全與程式碼預測

Cursor 能夠自動補全並預測你即將輸入的程式碼，這樣可以加快編程速度。

2. 與 AI 的深度整合

Cursor 提供一個類似 ChatGPT 的對話介面，讓你可以在聊天框裡直接請求程式碼片段。假設你需要建立一個登入頁面，你可以簡單地告訴 Cursor「建立一個登入頁面」，它就會為你生成對應的程式碼。

3. 直接修改程式碼與自動生成檔案

最顯著的優勢是，Cursor 不僅僅生成程式碼，還能直接將其應用到你的專案裡，甚至自動生成新檔案。這大大節省了手動複製貼上的時間，特別是對於不熟悉程式碼結構的使用者來說，就算GPT說得再清楚，也不一定會知道怎麼操作。

而有了 Cursor，你只需要運行看看結果，並依需求讓 AI 修改，甚至進行小幅度手動調整，這不僅節省時間，也能從中學習到更多知識。

雖然上面的功能，VS Code 加上 GitHub Copilot 也能實現部分功能，但 Cursor 的自動整合與生成能力顯然更進一步。這使得它不僅適合新手，也非常適合經驗豐富的開發者，用來提高開發效率。

建立登入頁面

聊天視窗

先打開專案使用快捷鍵 commd+L，就可以在右邊視窗開啟聊天室。如下圖。

然後我們可以在聊天視窗輸入你想要的需求，我們邊這邊是希望 Cursor 幫我們建立一個登入頁面。

登入頁面

「幫我加上登入頁面」在對話框輸入這個需求。
然後按 command+enter 送出。 enter的話他只會看這個檔案，command+enter 他會幫你分析這整個 code base。送出後可以看到回答。

要在你的 React Native 應用中添加一個登入頁面，你可以創建一個新的組件，然後在 App.tsx 中引用它。以下是如何實現的步驟：

1. 創建登入頁面組件：在 components 目錄下創建一個新的檔案 Login.tsx。

import React, { useState } from 'react';
import { View, TextInput, Button, StyleSheet, Text } from 'react-native';

const Login = () => {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');

    const handleLogin = () => {
        // 在這裡處理登入邏輯
        console.log('登入中...', { username, password });
    };

    return (
        <View style={styles.container}>
            <Text style={styles.title}>登入</Text>
            <TextInput
                style={styles.input}
                placeholder="用戶名"
                value={username}
                onChangeText={setUsername}
            />
            <TextInput
                style={styles.input}
                placeholder="密碼"
                secureTextEntry
                value={password}
                onChangeText={setPassword}
            />
            <Button title="登入" onPress={handleLogin} />
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        padding: 16,
    },
    title: {
        fontSize: 24,
        marginBottom: 20,
        textAlign: 'center',
    },
    input: {
        height: 40,
        borderColor: 'gray',
        borderWidth: 1,
        marginBottom: 12,
        paddingHorizontal: 8,
    },
});

export default Login;

2. 更新 App.tsx：在 App.tsx 中引用新的登入組件。

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import React from 'react';
import Login from './components/Login';

const App = () => {
    return (
        <Login />
    );
};

export default App;

這樣，你就成功地在你的 React Native 應用中添加了一個登入頁面。當然，你可以根據需要進一步擴展登入邏輯，例如與後端進行驗證等。

如果沒有開發經驗，可能看了也不一定知道他在說什麼？不用擔心 Cursor 可以直接把程式碼帶入，

套用程式碼
回答完成後，可以開啟 右下角的 「Composer」Icon，將會開啟 Composer 的編輯介面。

打開 Composer 介面，Cursor會自動幫你更新程式碼。

回到程式碼。你會看到會類似 git 看文件變動的樣子。綠色是新增，紅色是刪除。你可以看到Cursor幫你修改了哪些程式碼。
在右上角可以按接受或拒絕。按下接受將會套用到程式之中。

這邊Curosr幫我們修改了 APP還有新增了一個登入頁面。我們全部都按 Accept。

APP檔案修改畫面	Login 頁面新增

Magic!!! 可以看到模擬器畫面變了，從昨天的 Hello World 變成一個登入頁面了。到目前還沒自己親自寫過一行程式碼，就做出我們的第一個ＵＩ畫面了。

程式碼解釋

App.tsx
這邊我們用到昨天提到的元件化的概念，我們把Login頁面做成一個獨立的元件。變且在 APP 引入他。

import React from 'react';
import Login from './components/Login';

const App = () => {
    return (
        <Login />
    );
};

export default App;

Login.tsx

import React, { useState } from 'react';
import { View, TextInput, Button, StyleSheet, Text } from 'react-native';

const Login = () => {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');

    const handleLogin = () => {
        // 在這裡處理登入邏輯
        console.log('登入中...', { username, password });
    };

    return (
        <View style={styles.container}>
            <Text style={styles.title}>登入</Text>
            <TextInput
                style={styles.input}
                placeholder="用戶名"
                value={username}
                onChangeText={setUsername}
            />
            <TextInput
                style={styles.input}
                placeholder="密碼"
                secureTextEntry
                value={password}
                onChangeText={setPassword}
            />
            <Button title="登入" onPress={handleLogin} />
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        padding: 16,
    },
    title: {
        fontSize: 24,
        marginBottom: 20,
        textAlign: 'center',
    },
    input: {
        height: 40,
        borderColor: 'gray',
        borderWidth: 1,
        marginBottom: 12,
        paddingHorizontal: 8,
    },
});

export default Login;

UseState

useState 是 React 中用來管理狀態的一個功能。它讓我們可以在函數式元件中儲存和更新資料。在這裡，我們透過 useState 來追蹤「用戶名」和「密碼」的輸入內容。

const [username, setUsername] = useState('');

• username：儲存目前的用戶名（初始值為空字串 ''）。
• setUsername：用來更新 username 的函數。

每當使用者在 TextInput 中輸入內容，setUsername 會被呼叫來更新狀態，從而將最新的用戶名存到 username 裡。

React Native 中的元件

在 React Native 中，這個套件中有提供一些預設的元件可以提供使用。

• View：類似於網頁中的 div，用來當作容器包裹其他元件。
• TextInput：讓使用者輸入文字的元件，像是用戶名或密碼欄位。
• Button：一個簡單的按鈕，當使用者點擊時會觸發事件（例如 handleLogin 函數）。

結語

科技的進步讓我們現在寫程式並不一定要完全理解或學習過才能做出來，可以使用自然語言和電腦溝通讓他做出你想要的東西。

那我還需要學習寫程式嗎？我覺得早晚還是需要的，但是先有興趣有成就感才會有動力學下去。先學會工具我覺得很不錯。